<template>
	<div>
		<!-- <h1>已购</h1> -->
		<div class="pur">
			<div class="purhead">
				<div class="iconfont icon-fanhuipt" @click="$router.push('/userInfo')"></div>
				<p>已购</p>
			</div>

			<van-tabs v-model="active" animated>
				<van-tab :title="'数字专辑'">
					<div class="purcontent">
						<div class="iconfont icon-box"></div>
						<p>暂无购买的数字专辑</p>
					</div>
				</van-tab>

				<van-tab :title="'单曲'">
					<div class="purcontent">
						<div class="iconfont icon-box"></div>
						<p>暂无购买的单曲</p>
					</div>
				</van-tab>

				<van-tab :title="'播客'">
					<div class="purcontent">
						<div class="iconfont icon-box"></div>
						<p>暂无购买的播客</p>
					</div>
				</van-tab>

				<van-tab :title="'视频'">
					<div class="purcontent">
						<div class="iconfont icon-box"></div>
						<p>暂无购买的视频</p>
					</div>
				</van-tab>

				<van-tab :title="'线上演出'">
					<div class="purcontent">
						<div class="iconfont icon-box"></div>
						<p>暂无已购的线上演出门票</p>
					</div>
				</van-tab>

				<van-tab :title="'礼品卡'">
					<div class="gift">
						<van-tabs type="card">
							<van-tab title="我购买的">
								<div class="purcontent">
									<div class="iconfont icon-box"></div>
									<p>暂无购买的礼品卡</p>
								</div>
							</van-tab>

							<van-tab title="我收到的">
								<div class="purcontent">
									<div class="iconfont icon-box"></div>
									<p>暂无收到的礼品卡</p>
								</div>
							</van-tab>
						</van-tabs>
					</div>
				</van-tab>

				<van-tab :title="'演出'">
					<div class="purcontent">
						<div class="iconfont icon-box"></div>
						<p>暂无购买的演出</p>
					</div>
				</van-tab>

				<van-tab :title="'直播特权'">
					<div class="purcontent">
						<div class="iconfont icon-box"></div>
						<p>没有加入粉团及守护的主播</p>
					</div>
				</van-tab>

				<van-tab :title="'乐谱'">
					<div class="purcontent">
						<div class="iconfont icon-box"></div>
						<p>您还没有购买乐谱哦</p>
						<span>快去寻找更多歌曲乐谱吧~</span>
					</div>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {};
		},
		created() {
			this.$emit("getnavs-btn", false);
		},
	};
</script>

<style lang="less">
	.van-tabs__wrap{
		.van-tabs__nav--card{
			// background-color: #243DE2;
			// border: 1px solid #243DE2;
			color: #FFFFFF;
		}
		
	}
	.pur {
		width: 100%;

		.purhead {
			width: 100%;
			min-height: 30px;
			line-height: 30px;
			font-size: 20px;
			background-color: #0F172A;
			color: #fff;
			text-align: center;
			display: flex;
			padding: 8px 0px;
			box-sizing: border-box;
			text-align: center;

			.iconfont {
				flex: 0 0 30px;
			}

			p {
				flex: 1;
				padding-right: 30px;
				text-align: center;
			}
		}

		.purcontent {
			width: 210px;
			text-align: center;
			margin: 100px auto;
			color: #aaa;

			.iconfont {
				font-size: 120px;
			}

			p {
				font-size: 14px;
				margin-bottom: 10px;
			}

			span {
				font-size: 13px;
				color: #bbb;
			}
		}

		.gift {
			padding-top: 15px;
		}
	}
</style>
